<template>
  <div class="login_container">
    <div class="login-wrap">
      <div class="login-form">
        <h1 class="login-title">登录</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入用户名" size="large"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              size="large"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              style="background-color: #2d8cf0"
              size="large"
              class="fill_btn"
              type="primary"
              @click="submitForm"
            >
              {{ active === 'login' ? '登 录' : '注 册' }}</el-button
            >
          </el-form-item>
          <!-- <el-form-item>
            <el-checkbox v-model="remberPassword">记住密码</el-checkbox>
          </el-form-item> -->
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// import { login } from "@/api/index";
import loginImg from '@/assets/login/dlbox.svg'
import Utils from '@/utils/utils'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      remberPassword: true,
      active: 'login',
      loginImg,
      tabs: [
        { label: '登录', name: 'login' },
        { label: '注册', name: 'register' }
      ],
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {
    // let userInfo = Utils.getStorage("userInfo");
    // if (userInfo) {
    //   Object.assign(this.ruleForm, userInfo);
    // } else {
    //   this.$alert("登录失败，请检查用户名和密码！", "提示", {
    //     confirmButtonText: "确定",
    //   });
    // }
    // if(this.remberPassword){
    //   console.log(window.localStorage.getItem("userInfo"))
    //         }
  },
  methods: {
    ...mapActions({
      getLoginInfo: 'user/getLoginInfo'
    }),
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // login(this.ruleForm)
          // .then((res) => {
          // if (res.status) {
          // this.$message.success("登录成功");
          //存储用户信息
          // this.dis;
          // this.getLoginInfo(res.data);
          this.$store.dispatch('getLoginInfo', this.ruleForm).then(() => {
            this.$router.push({ name: 'home' })
          })

          // }
          // })
          // .catch((err) => {});
        } else {
          return false
        }
      })
    },
    resetForm() {},
    changeTab(item) {
      this.active = item.name
    }
  }
}
</script>
<style lang="scss" scoped>
.login_container {
  height: 100%;
  display: flex;
  justify-content: center;
  // align-items: center;
  // background-color: #f3f3f3;
  background-image: url('../../assets/loginback.png');
  .login-wrap {
    // margin-left: auto;
    // margin-right: auto;
    background: #fff;
    // margin-bottom: 50px;
    width: 500px;
    height: 320px;
    margin-top: 25vh;
    padding: 20px 50px;
    border-radius: 4px;

    .login-form {
      padding-bottom: 10px;
    }

    .login-title {
      padding: 10px 0 20px;
      font-size: 20px;
      color: #545454;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 500;
    }
  }
}

::v-deep {
  // .el-input {
  //   margin-top: 20px;
  //   border-radius: 2px;
  //   padding: 7px 0;
  //   border: 1px solid #e9e9e9;
  // }
  // .el-input--small .el-input__inner {
  //   border: none;
  //   background-color: transparent;
  // }

  // ::-webkit-scrollbar-track {
  //   background-color: none !important;
  // }
  // input {
  //   background-color: transparent;
  // }
}
</style>
